<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <hr>
        1.基础demo
        <!-- 单向绑定只是获取data中的数据，来进行展示，你修改，并不会影响data中的值！ -->
        单向绑定：<input type="text" :value="message"><br>
        <!-- 双向绑定不仅仅可以获取data中的数据，来展示，你修改，也会让data中的值发生变化！ -->
        双向绑定：<input type="text" v-model="message">
        <br>
        单向绑定升级为双向绑定：<input type="text" :value="message" @input="changeValue"><br>
        vue的data数据：{{message}}
        <hr>
        <br>
        2.文本 通常用于表单点击 新建/添加 的时候！
        <input type="text" v-model="msg">
        {{msg}}
        <hr>
        <br>
        3.多行文本 通常用于表单点击 新建/添加 的时候！
        <textarea v-model="textarea" cols="30" rows="10"></textarea>
        {{textarea}}
        <hr>
        <br>
        4.复选框
        <input type="checkbox" v-model="checked">
        {{checked}}
        <input type="checkbox" v-model="checked1">
        {{checked1}}
        <input type="checkbox" v-model="checked2">
        {{checked2}}
        <br>
        全选功能： <input type="checkbox" v-model="checkedAll" @change="checkedAllfun">
        {{checkedAll}}
        <hr>
        <br>
        5.单选
        <input type="radio" name="sex" v-model="choise" value="man">男
        <input type="radio" name="sex" v-model="choise" value="girl">女
        <input type="radio" name="sex" v-model="choise" value="you">未知
        {{choise}}
        <hr>
        <br>
        6.下拉列表
        <select v-model="kaoshi[0].selected">
            <option value="" disabled>请选择</option>
            <option value="A">A</option>
            <option value="B">B</option>
            <option value="C">C</option>
        </select>
        <select v-model="kaoshi[1].selected">
            <option value="" disabled>请选择</option>
            <option value="A">A</option>
            <option value="B">B</option>
            <option value="C">C</option>
        </select>
        {{kaoshi}}
    </div>
    <script>
        let vm = new Vue({
            el: "#app",
            data() {
                return {
                    message: "abc",
                    msg:"",
                    textarea:`
                     多行字符串的符号
                     我还能换行！
                    `,
                    checked:false,
                    checked1:false,
                    checked2:false,
                    checkedAll:false,
                    choise:"",
                    kaoshi:[
                        {selected:""},
                        {selected:""}
                    ]
                    
                }
            },
            methods: {
                //手动模拟v-model的方法
                changeValue(e) {
                    //获取input事件对应的输入框的值，然后去修改data中的message！
                    this.message = e.target.value;
                },
                checkedAllfun(){
                        this.checked = this.checkedAll;
                        this.checked1 = this.checkedAll;
                        this.checked2 = this.checkedAll;
                }
            },
        });
    </script>
</body>

</html>